<template>
  <div class="bar-2" :style="{ top, position }">
    <div class="t1">
      <router-link to="/home">
        <img src="../assets/img/maoyan.png" alt="" />
      </router-link>
    </div>
    <div class="t2">
      <span class="span1">发现最新最热电影</span>
    </div>
    <div class="t3">
      <span>打开App&gt;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyHeader2",
  props: ["top", "position"],
};
</script>

<style scoped>
.bar-2 {
  /* position: fixed; */
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  z-index: 9;
}

.bar-2 .t2 span {
  color: #666;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  height: 0.4533rem;
  width: 2.9867rem;
}

.bar-2 .t2 {
  margin-left: 1.2rem;
}

.bar-2 .t1 img {
  width: 110px;
  height: 50px;
  margin-left: 0.2667rem;
}

.bar-2 .t3 span {
  font-size: 16px;
  color: #b37e7e;
  font-weight: bold;
}

.bar-2 .t3 img {
  width: 12px;
  height: 11px;
}
</style>